<template>
  <div class="main flex">
    <div class="left">
      <el-row>
        <custom-head text="选择IP网段"></custom-head>
      </el-row>
      <el-row class="mt15" type="flex" justify="space-between">
        <el-input size="mini" clearable v-model="form.name" @input="search" placeholder="请输入IP"></el-input>
      </el-row>
      <div class="ip-wrap mt25">
        <div v-for="item in IpManagetList" @click="chooseId(item)"
          :class="{ 'ip-item': true, 'active': active.id == item.id }">
          {{ item.ipNetworkName }}
        </div>
      </div>
    </div>
    <div class="right">
      <div class="head">
        <custom-head text="IP地址段信息"></custom-head>
        <div class="flex-jsb mt15" style="width: 90%;">
          <div>
            IP网段名称：<span>{{ active.ipNetworkName }}</span>
          </div>
          <div>
            IP地址网段：<span>{{ active.ipNetwork }}</span>
          </div>
          <div>
            IP地址总数：<span>{{ active.totalIpCount }}</span>
          </div>
        </div>
      </div>
      <div class="bottom mt15">
        <custom-head text="IP地址列表">
          <el-button type="text" @click="toggle">切换视图</el-button>
        </custom-head>
        <div class="iplist">
          <!--  -->
          <div v-if="isList">
            <el-table :data="showData" height="575" style="width: 100%;overflow: auto;">
              <el-table-column prop="ip" label="IP地址" width="180">
              </el-table-column>
              <el-table-column prop="subnetMask" label="子网掩码" width="180">
              </el-table-column>
              <el-table-column prop="id	" label="Mac地址">
              </el-table-column>
              <el-table-column prop="hostNameCn" label="主机名">
              </el-table-column>
              <el-table-column prop="beSystem" label="所属业务">
              </el-table-column>
              <el-table-column prop="updateTime" label="更新时间" width="180">
                <template slot-scope="scope">
                  <div>{{ formatDate(scope.row.updateTime) }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="state" label="状态">
                <template slot-scope="scope">
                  <div class="flex-ac">
                    <div :class="['state', 'state' + scope.row.state]"> </div>
                    <div> {{ getState(scope.row.state) }}</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label=" 操作" width="100">
                <template slot-scope="scope">
                  <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page.sync="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper" :total="total" class="mt15 systemPagination el-pagination">
            </el-pagination>
          </div>
          <!--  -->
          <div v-else class="viewList">
            <div class="flex-center" style="width: 86%;">
              <div>已用</div>
              <div>未用</div>
              <div>异常</div>
              <div>预释放</div>
              <div>预占用</div>
              <div>非法占用</div>
            </div>
            <div v-for=" item in showData">
              <div class="flex item">
                <div class="leftIp">{{ item.ip }}</div>
                <div class="flex-ac">
                  <div v-for="list in item.ipList" :class="['block', 'state' + list.state]" @click="openDetail(list)">
                    {{ matchStr(list.ip) }}
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
    <el-dialog title="IP地址信息卡片" :visible="dialogVisible" width="30%" :before-close="handleClose">
      <div class="dialog-content">
        <div class="flex">
          <div>状态：{{ currentData.state }}</div>
          <div>
            更新时间：{{ formatDate(currentData.updateTime) }}
          </div>
        </div>
        <div class="flex">
          <div>IP地址：{{ currentData.ip }}</div>
          <div>
            子网掩码：{{ currentData.subnetMask }}
          </div>
        </div>
        <div class="flex">
          <div>主机名：{{ currentData.hostName }}</div>
          <div>
            主机中文名：{{ currentData.hostNameCn }}
          </div>
        </div>
        <div class="flex">
          <div>所属业务：{{ currentData.beSystem }}</div>
          <div>
            主机所在位置：{{ currentData.hostPlace }}
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getIpManagetList, ipViewList, ipViewManage, ipHistoryDetail
} from "@/api/ipManageApi.js";
import utils from "@/utils/date.js"
import customHead from "@/components/head/index.vue"

export default {
  components: { customHead },
  data() {
    return {
      form: {
        name: "",
      },
      IpManagetList: [],
      active: {},
      tableList: [],
      showData: [],
      isList: true,
      total: 0,
      pageSize: 10,
      currentPage: 1,
      timer: 0,
      currentData: {},
      dialogVisible: false,
    };
  },
  mounted() {
    // 获取所有机房列表
    this.getIpManagetList();
  },
  methods: {
    chooseId(data) {
      this.active = data;
      if (this.isList) {
        this.ipViewList(this.active.id);
        return
      }
      this.ipViewManage(this.active.id)
    },
    getIpManagetList(name) {
      // 获取机房详情
      let param = {};
      if (name) {
        param['ipNetworkName'] = name;
      }
      getIpManagetList(param).then(res => {
        if (res.code == "200") {
          this.IpManagetList = res.info;
          if (res.info.length) {
            this.active = res.info[0];
            this.ipViewList(this.active.id);
          }
        }
      });
    },
    formatDate(date) {
      return utils.formatter(date, "yyyy-MM-dd hh:mm:ss")
    },
    getState(state) {
      // 1已用 2未用 3异常 4预释放 5预占用 6非法占用
      switch (state) {
        case 1:
          return '已用'
          break;
        case 2:
          return '未用'
        case 3:
          return '异常'
        case 4:
          return '预释放'
        case 5:
          return '预占用'
        default:
          return '非法占用'
      }
    },
    matchStr(str) {
      if (!str) return ""
      var strList = str.split(".");
      return strList.at(-1)
    },
    handleClick(row) {
      this.$router.push(`/ipManage/detail/${row.ip}`)
    },
    openDetail(data) {
      this.getDetail(data.ip)
    },
    // 
    search() {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      setTimeout(() => {
        this.getIpManagetList(this.form.name)
      }, 500);
    },
    handleClose(done) {
      this.dialogVisible = false
      done()
    },
    // 切换视图
    toggle() {
      this.isList = !this.isList;
      if (this.isList) {
        this.ipViewList(this.active.id);
        return
      }
      this.ipViewManage(this.active.id)
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1
      this.showData = this.tableList.slice(0, val)
    },

    handleCurrentChange(val) {
      this.showData = this.tableList.slice((val - 1) * this.pageSize, this.pageSize * val)
    },
    // 获取卡片详情
    getDetail(ip) {
      ipHistoryDetail({ ip }).then(res => {
        if (res.code == "200") {
          this.currentData = res.info;
          this.dialogVisible = true;
        }
      })
    },

    // 列表
    ipViewList(id) {
      ipViewList({ id }).then(res => {
        if (res.code == "200") {
          this.tableList = res.info;
          this.total = res.info.length;
          this.showData = this.tableList.slice(0, this.pageSize);
        }
      })
    },

    // 视图
    ipViewManage(id) {
      ipViewManage({ id }).then(res => {
        if (res.code == "200") {
          this.showData = res.info ? res.info : [];
          // let array = [];
          // for (let index = 0; index < res.info.length; index++) {
          //   array.push(res.info[index]);

          //   if (array.length == 20) {
          //     console.log(array.length);
          //     this.showData.push({
          //       ip: res.info[index].ip,
          //       list: array.splice(0, 20)
          //     })
          //   }
          // }
          // this.showData.push({
          //   ip: array[0].ip,
          //   list: array
          // })

          // console.log(this.showData);
        }
      })
    }

  },
};
</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  overflow: auto;
  margin: 0 auto;

  .left {
    width: 20%;
    height: 100%;
    padding: 16px;
    overflow: auto;
    box-shadow: 0px 0px 12px 0px rgba(129, 155, 151, 0.3);
    border-radius: 10px;
    background-color: #fff;

    .ip-wrap {
      font-size: 16px;
      color: #333;
      height: 74%;
      width: 100%;
      overflow: auto;

      .ip-item {
        padding: 10px 20px;

        &:hover {
          background-color: rgba(33, 183, 149, 0.2);
          color: #fff;
        }

        &.active {
          background-color: #21B794;
          color: #fff;
        }
      }

    }
  }

  .right {
    flex: 1;
    margin-left: 16px;
    // overflow: auto;
    border-radius: 10px;

    .head {
      padding: 16px;
      box-shadow: 0px 0px 12px 0px rgba(129, 155, 151, 0.3);
      border-radius: 10px;
      background-color: #fff;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        left: -15px;
        bottom: 50px;
        background: #F0F0F0;
      }
    }

    .bottom {
      padding: 16px;
      height: calc(100% - 105px);
      overflow: hidden;
      box-shadow: 0px 0px 12px 0px rgba(129, 155, 151, 0.3);
      border-radius: 10px;
      background-color: #fff;

      .iplist {
        overflow: auto;
        height: calc(100% - 50px);
      }

      .viewList {
        .flex-center {
          >div {
            position: relative;
            margin: 10px 20px;

            &::before {
              content: "";
              width: 8px;
              height: 8px;
              background: #B2E9CF;
              position: absolute;
              left: -15px;
              top: 6px;
            }

            &:nth-child(2)::before {
              background: #DCDCDC;
            }

            &:nth-child(3)::before {
              background: #FFBA00;
            }

            &:nth-child(4)::before {
              background: #33ABFF;
            }

            &:nth-child(5)::before {
              background: #CE88FF;
            }

            &:nth-child(6)::before {
              background: #FF7A7A;
            }
          }
        }

        .viewList-wrap {
          overflow: auto;
          height: calc(100% - 50px);
          border: 1px solid #F0F0F0;
          border-radius: 6px;
        }

        .item {
          border: 1px solid #F0F0F0;
          height: 50px;
          border-bottom: none;

          .leftIp {
            width: 180px;
            line-height: 50px;
            text-align: center;
            border-right: 1px solid #F0F0F0;
            margin-right: 50px;
            font-size: 16px;
            color: #333;
          }

          .block {
            width: 36px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            margin-right: 5px;
            color: #666;
            font-size: 14px;
          }
        }


      }

      /deep/ .el-table__header tr,
      /deep/ .el-table__header th {
        background-color: var(--system-table-header-bgc) !important;
        color: #333;
        font-weight: 400;
      }



    }
  }

  .dialog-content {
    .flex {
      margin: 10px 0;

      &>div {
        flex: 1;
      }
    }
  }
}

.state {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
}

.state1 {
  background: #21B795;

}

.state2 {
  background: #B4B4B4;
}

.state3 {
  background: #FF9000;
}

.state4 {
  background: #33ABFF;
}

.state5 {
  background: #CE88FF;
}

.state6 {
  background: #EA305C;
}
</style>

